{% extends "../../main.html" %}

{% block title %}{{ _("Categories") }}{% end %}

{% block header %}
<script src="/static/js/pages/admin/view/categories.js"></script>
{% end %}

{% block modals %}
{% from tornado.options import options %}
<!-- Hidden Edit Form -->
<div id="edit-category-item-modal" class="modal hide fade" style="display: none; ">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>
            <i class="fa fa-pencil"></i>
            {{ _ ("Edit Category") }}
        </h3>
    </div>
    <div class="modal-body">
        <br />
        <form id="edit-category-item-form" class="form-horizontal" action="/admin/edit/category" method="post">
            {% raw xsrf_form_html() %}
            <input type="hidden" id="edit-category-item-uuid" name="uuid" value="" />
            <div class="control-group">
                <label class="control-label" for="category">{{ _("Category Name") }}</label>
                <div class="controls">
                    <input autofocus id="edit-category-item-name" name="category" maxlength="24" minlength="3" type="text" placeholder="Category" />
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <textarea autofocus id="edit-category-description" name="category_description" maxlength="1024" type="text" placeholder="{{_('Optional')}} {{_('Description')}}"
                           data-original-title="{{_('Description')}}">
                    </textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">{{ _("Close") }}</a>
        <button id="edit-category-item-submit" type="button" class="btn btn-primary">
            <i class="fa fa-save"></i>
            {{ _("Save") }}
        </button>
    </div>
</div>
<div id="delete-category-modal" class="modal hide fade" style="display: none; ">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3><i class="fa fa-fw fa-times-circle-o"></i> {{ _("Delete Category") }}</h3>
    </div>
    <div class="modal-body">
    <p>
        {{ _("Are you sure you want to delete this category?") }} <br />
    </p>
    <form id="delete-category-form" method="post" action="/admin/delete/category">
        {% raw xsrf_form_html() %}
        <input id="delete-category-uuid" name="uuid" type="hidden" value="" />
    </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">{{ _("Close") }}</a>
        <button id="delete-category-submit" type="button" class="btn btn-danger">
            <i class="fa fa-fw fa-times-circle-o"></i>
            {{ _("Delete") }}
        </button>
    </div>
</div>
{% end %}

{% block content %}
{% from models.Category import Category %}
<div class="container">
    <h2>
        <i class="fa fa-th-large"></i>
        {{ _("Manage Categories") }}
    </h2>
    <br />
    {% if errors is not None and len(errors) != 0 %}
        {% for error in errors %}
              <div class="alert alert-error">
                <a class="close" data-dismiss="alert" href="#">&times;</a>
                <h4 class="alert-heading">{{_("ERROR")}}</h4>
                {{ error }}
              </div>
        {% end %}
      {% end %}
      <div class="well">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="shortcolumn"> # </th>
                    <th class="shortcolumn"> {{ _("Category Name") }} </th>
                    <th> {{ _("Description") }}</th>
                    <th class="shortcolumn"><!-- Button --></th>
                </tr>
            </thead>
            <tbody>
                {% for index, item in enumerate(Category.all()) %}
                    <tr>
                        <td class="shortcolumn"> {{ index + 1 }} </td>
                        <td class="shortcolumn"> {{ item.category }} </td>
                        <td> {{ item.description }}</td>
                        <td class="shortcolumn">
                            <a id="edit-category-item-button{{ index }}" class="btn btn-mini" data-toggle="modal" href="#edit-category-item-modal" data-uuid="{{ item.uuid }}" data-name="{{ item.category }}" data-description="{{ item.description }}">
                                &nbsp;&nbsp;<i class="fa fa-pencil"></i>&nbsp;
                                {{ _("Edit") }}&nbsp;&nbsp;&nbsp;
                            </a>
                        </td>
                        <td class="shortcolumn">
                            <a id="delete-category-button-{{ item.uuid }}" class="btn btn-danger btn-mini" data-toggle="modal" href="#delete-category-modal" data-uuid="{{ item.uuid }}">
                                <i class="fa fa-fw fa-times-circle-o"></i>
                                {{ _("Delete") }}&nbsp;
                            </a>
                        </td>
                    </tr>
                {% end %}
            </tbody>
        </table>
    </div>
</div>
{% end %}